<template>
    <div>
        
        <cu-navbar>
            <block slot="content">上架中</block>
        </cu-navbar>
        <view class="page order-page">
            <div class="tabs">
                <u-tabs active-color="#FF2E26" inactive-color='#888' :current="tabValue" :list="tabsList" :is-scroll="false" @change="changeTab" ></u-tabs>
            </div>
            <div class="f-r a-c input-box">
                <u-search shape="square" :showAction="false" bgColor="#f8f8f8" v-model="searchValue" placeholder="请输入搜索内容" inputAlign="left" height="70rpx"></u-search>
            </div>
            <div class="order-list">
                <div class="order-item" v-for="(item,index) in orderListShow" :key="item.order_sn">
                    <div class="order-content f-r">
                        <div class="f-s">
                            <u-image :src="item.image" width="160rpx" height="160rpx"></u-image>
                        </div>
                        <div style="margin-left: 20rpx;">
                            <div class="order-name">{{ item.name }}</div>
                            <div class="order-date">{{ item.product_sn }}</div>
                            <div class="order-date">{{ $common.timeToDate(item.create_time * 1000, true) }}</div>
                            <div class="order-price order-price1">
                                <span>实付款：</span>
                                <span class="order-price1">￥{{ item.price }}</span>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <!-- 古玩拆分 -->
            <u-popup v-model="show" mode="center">
                <view class="box_popup box_popup1">
                    <view>拆封</view>
                    <view>输入拆分数量，可拆分成2份或3份
                        拆分后的价格不小于2000</view>
                    <input type="text" v-model="chaifenNum" />
                    <view class="btn">
                        <view class="cancel" @click="show = false">取消</view>
                        <view class="ok" @click="confirm_chaifen">确定</view>
                    </view>
                </view>
            </u-popup>
            <u-empty
                v-if="!orderListShow.length"
                mode="order"
            />
            <footer-page
                :page="page"
                :pagesize="pagesize"
                :page-size="pageSize"
                :page-total="pageTotal"
                @pre="pagePre"
                @next="pageNext"
            ></footer-page>
        </view>
    </div>
</template>

<script>
import footerPage from "@/components/footer-page/index.vue";
import page from '@/mixins/page'
const tabMap = {
    6: 0,
    0: 1,
    1: 2,
    2: 3,
}
const tabMap2 = {
    0: 6,
    1: 0,
    2: 1,
    3: 2,
}
export default {
    components: {
        footerPage,
    },
    mixins: [page],
    data() {
        return {
            searchValue: '',
            tabsList: [
                { name: '交易中', value: '0' },
                { name: '委卖中', value: '1' }
            ],
            orderList: [
            ],
            tabValue: 0,
            chaifenNum: 0,
            show: false
            
        }
    },
    computed: {
        orderListShow() {
            return this.orderList.filter(el => el.name.includes(this.searchValue))
        }
    },
    onShow() {
        this.getList()
    },
    onPullDownRefresh() {
        this.page = 1
        this.getList()
    },
    methods: {
        changeTab(e) {
            this.tabValue = e
            this.pageNo = 1
            this.getList()
        },
        getList() {
            this.$api.weimaiList({
                type: this.tabValue
            }).then(res => {
                console.log(res)
                this.orderList = res.result
                this.pageTotal = res.result.pageTotal
                this.pageSize = res.result.pageSize
                uni.stopPullDownRefresh()
            })
        },
        // 付款
        confirm_pay(item) {
            this.$common.modelShow('提示', '确认付款？',() => {
                this.$api.pay({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        // 收款
        confirm_get(item) {
            this.$common.modelShow('提示', '确认收款？',() => {
                this.$api.pay2({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        // 卖
        sell(item) {
            this.$common.modelShow('提示', '确认委托代卖？',() => {
                this.$api.sell({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        chaifen(item) {
            uni.navigateTo({
                url: '/pages/order-list/chaifen?orderId=' + item.id
            })
        },
        confirm_chaifen() {
            if (!this.chaifenNum) return this.$common.errorToShow('拆分数量不能为空')
            this.$api.chaifen({
                product_sn: this.order.order_sn,
                splitnum: this.chaifenNum,
            }).then(res => {
                if (res.code == 1) {
                    this.pageNo = 1
                    this.getList()
                    setTimeout(() => {
                        uni.showToast({
                            icon: 'none',
                            title: res.reason
                        })
                    })
                    this.show = false
                }
            })
        },
        tihuo(item) {
            this.$common.modelShow('提示', '确认提货？',() => {
                this.$api.tihuo({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
    }
}
</script>

<style lang="scss">
.order-page {
    min-height: 100%;
    .input-box {
        background-color: #fff;
        padding: 18px 10px 8px 10px;
    }
    .tabs {
        width: 100%;
        background-color: #fff;
    }
    .order-list {
        padding: 30rpx;
        .order-item {
            margin-bottom: 20rpx;
            border-radius: 4px;
            background-color: #fff;
            padding: 30rpx;
            .order-header {
                .order-num {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                }
                .order-status {
                    font-size: 24rpx;
                    .text {
                        color: #666;
                        font-weight: bold;
                    }
                }
            }
            .order-content {
                .order-name {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                    word-break: break-all;
                }
                .order-price {
                    font-size: 24rpx;
                    color: #999;
                }
                
                .order-price1 {
                    color: #f44336;
                }
                .order-price2 {
                    font-size: 24rpx;
                    color: #999;
                }
                
            }
            .order-date {
                flex-shrink: 0;
                font-size: 28rpx;
                color: #999;
                word-break: break-all;
            }
            .button-list {
                flex-grow: 1;
                margin-top: 10rpx;
                .button {
                    background-color: rgb(255, 68, 59);
                    color: #fff;
                    text-align: center;
                    line-height: 60rpx;
                    border-radius: 4px;
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    padding: 0 20rpx;
                }
            }
        }
    }
    
    .box_popup {
        width: 662upx;
        text-align: center;
        
        & view:nth-child(1) {
            margin-top: 32upx;
            color: #333;
            font-size: 32upx;
            font-family: PingFang SC;
            font-weight: 500;
        }
        
        & view:nth-child(2) {
            margin-top: 38upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
        }
        
        .btn {
            display: flex;
            
            
            view {
                width: 50%;
                border-top: 2upx solid #e6e6e6;
                opacity: 1;
                text-align: center;
                line-height: 100upx;
            }
            
            .cancel {
                border-right: 2upx solid #e6e6e6;
                color: #999999;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
            
            .ok {
                color: #007aff;
                margin-top: 32upx;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
        }
    }
    
    .box_popup1 {
        & view:nth-child(2) {
            width: 424upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
            margin: 38upx auto 0;
        }
        
        input {
            width: 424upx;
            border: 2upx solid #e6e6e6;
            margin: 0 auto;
            height: 64upx;
            margin-top: 38upx;
        }
    }
}
</style>
